<template>
  <div class="navbar">
      <h2>尊敬的{{ this.mobile }}，欢迎使用本系统！</h2>
      <div class="navbar-menu">
        <el-menu mode="horizontal"
        background-color="#f1af34"
        text-color="#fff"
        active-text-color="#fff">
          <router-link :to="{path:'/member/build',query:{name:this.mobile}}"><el-menu-item index="1">房屋</el-menu-item></router-link>

          <router-link :to="{path:'/member/park',query:{name:this.mobile}}"><el-menu-item index="2">车位</el-menu-item></router-link>

          <router-link :to="{path:'/member/charge',query:{name:this.mobile}}"><el-menu-item index="3">缴费</el-menu-item></router-link>

          <router-link :to="{path:'/member/temporarypark',query:{name:this.mobile}}"><el-menu-item index="4">临时停车</el-menu-item></router-link>
          <router-link :to="{path:'/member/complaint',query:{name:this.mobile}}"><el-menu-item index="5">投诉</el-menu-item></router-link>

        </el-menu>
        </div>
        <div class="container-table">
            <el-table
                :data="proHouse"
                style="width: 100%">
                <el-table-column
                    prop="num"
                    label="房屋编号"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="floor"
                    label="楼层"
                    width="180">
                </el-table-column>
                <el-table-column label="入住情况" width="80">
                    <template slot-scope="scope">
                        {{ scope.row.status===1?'已入住':'未入住' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="buildId"
                    label="楼栋ID">
                </el-table-column>
            </el-table>
            </div>
  </div>
  
</template>

<script>

import memberApi from '@/api/member/member'
import houseApi from '@/api/pro/house'
export default {
    data(){
        return {
            mobile:"",
            houseId:"",
            proHouse:null
        }
        
    },
    created(){
        this.mobile=this.$route.query.name
        this.getOwner()
        
    },
    methods: {
        getOwner(){
            memberApi.getOwnerByMobile(this.mobile)
                    .then(response => {
                        this.houseId = response.data.houseId
                        this.getHouse(this.houseId)
                    })
        },
        getHouse(houseId){
            houseApi.getHouseById(houseId)
                    .then(response => {
                        this.proHouse = response.data.proHouse
                        console.log(this.proHouse)
                    })
        }
    }
}


</script>


<style type="text/css">
.navbar {
    background-color: #ffffff;
    height: 100px;
    border-radius: 0px !important;
    position: relative;
}
.navbar h2{
    top:0;
    line-height: 60px;
    margin:0;
    left: 10%;
    font-size: 20px;
    color: rgb(0, 0, 0);
}
.navbar-menu{
    position: absolute;
    left: 0%;
    top: 150px;
    height: 100%;
    line-height: 80px;
    background: transparent;
    padding: 0;
    margin: 0;
}

.container-table {
    position: absolute;
    margin-right:0;margin-left:10%;
    
}
</style>